<script lang="ts" setup>
import type { SchoolApi } from '#/api/edu/base/school';

import { Col, Row } from 'ant-design-vue';

import { useDescription } from '#/components/description';
import { Image } from '#/components/image';

import { useBaseDetailSchema } from '../data';

const props = defineProps<{
  school: SchoolApi.School;
}>();

const [Descriptions] = useDescription({
  bordered: false,
  size: 'middle',
  column: 2,
  labelWidth: 100,

  schema: useBaseDetailSchema(),
});
const [RemarksDescriptions] = useDescription({
  bordered: false,
  size: 'middle',
  column: 1,
  labelWidth: 100,

  schema: [
    {
      label: '备注',
      field: 'remarks',
    },
  ],
});
</script>

<template>
  <Row :gutter="16">
    <Col :xs="24" :md="4">
      <!-- 学校图标 -->
      <div class="school-logo-container flex justify-center">
        <Image
          v-if="school.icon"
          :src="school.icon"
          alt="学校图标"
          class="school-logo h-32 w-32 rounded-lg border border-gray-200 object-contain"
        />
        <div
          v-else
          class="school-logo-placeholder flex h-32 w-32 items-center justify-center rounded-lg border border-gray-200 bg-gray-100"
        >
          <span class="text-lg text-gray-400">暂无图标</span>
        </div>
      </div>
    </Col>
    <Col :xs="24" :md="20">
      <Descriptions :data="school" class="mx-4" />
    </Col>
    <Col :xs="24" :md="24" v-if="school.remarks">
      <RemarksDescriptions :data="school" class="mx-4" />
    </Col>
  </Row>
</template>
<style scoped>
.school-logo-container {
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.school-logo-container:hover {
  transform: scale(1.02);
}

.school-logo {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transition: box-shadow 0.3s ease;
}

.school-logo:hover {
  box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
}

.school-logo-placeholder {
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.school-logo-placeholder:hover {
  background-color: #f5f5f5;
}
</style>
